<template>
  <view class="featured-all">
    <!-- 顶部搜索 -->
    <view class="search-bar">
      <view class="search-box">
        <text class="iconfont icon-search"></text>
        <input 
          type="text"
          v-model="keyword"
          placeholder="搜索特色医疗项目"
          @input="onSearch"
        />
      </view>
      <view class="filter-btn" @tap="showFilter">
        <text class="iconfont icon-filter"></text>
        筛选
      </view>
    </view>
    
    <!-- 分类标签 -->
    <scroll-view 
      scroll-x 
      class="category-bar"
      :show-scrollbar="false"
    >
      <view 
        class="category-item"
        v-for="(item, index) in categories"
        :key="index"
        :class="{ active: currentCategory === item.id }"
        @tap="selectCategory(item)"
      >
        <text>{{ item.name }}</text>
      </view>
    </scroll-view>
    
    <!-- 特色医疗列表 -->
    <scroll-view 
      scroll-y 
      class="featured-list"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <view 
        class="featured-item"
        v-for="(item, index) in featuredList"
        :key="index"
        @tap="viewDetail(item)"
      >
        <image :src="item.image" mode="aspectFill" class="cover-image" />
        <view class="content">
          <view class="info">
            <text class="name">{{ item.name }}</text>
            <text class="desc">{{ item.desc }}</text>
            <view class="tags">
              <text v-for="(tag, idx) in item.tags" :key="idx">{{ tag }}</text>
            </view>
          </view>
          <view class="stats">
            <view class="stat-item">
              <text class="value">{{ item.doctors }}+</text>
              <text class="label">专家医生</text>
            </view>
            <view class="stat-item">
              <text class="value">{{ item.cases }}+</text>
              <text class="label">成功案例</text>
            </view>
            <view class="stat-item">
              <text class="value">{{ item.rating }}</text>
              <text class="label">用户评分</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <uni-load-more 
        :status="loadMoreStatus"
        :content-text="{
          contentdown: '上拉加载更多',
          contentrefresh: '加载中...',
          contentnomore: '没有更多了'
        }"
      />
    </scroll-view>
    
    <!-- 筛选抽屉 -->
    <uni-drawer ref="filterDrawer" mode="right">
      <view class="filter-drawer">
        <view class="drawer-header">
          <text class="title">筛选条件</text>
          <text class="reset" @tap="resetFilter">重置</text>
        </view>
        
        <!-- 医院 -->
        <view class="filter-section">
          <text class="section-title">医院</text>
          <view class="tag-list">
            <text 
              v-for="(item, index) in hospitals"
              :key="index"
              :class="{ active: filter.hospital === item.value }"
              @tap="selectHospital(item.value)"
            >{{ item.label }}</text>
          </view>
        </view>
        
        <!-- 价格区间 -->
        <view class="filter-section">
          <text class="section-title">价格区间</text>
          <view class="tag-list">
            <text 
              v-for="(item, index) in priceRanges"
              :key="index"
              :class="{ active: filter.priceRange === item.value }"
              @tap="selectPriceRange(item.value)"
            >{{ item.label }}</text>
          </view>
        </view>
        
        <!-- 排序方式 -->
        <view class="filter-section">
          <text class="section-title">排序方式</text>
          <view class="sort-list">
            <view 
              class="sort-item"
              v-for="(item, index) in sortOptions"
              :key="index"
              :class="{ active: filter.sort === item.value }"
              @tap="selectSort(item.value)"
            >
              <text>{{ item.label }}</text>
              <text class="iconfont icon-check"></text>
            </view>
          </view>
        </view>
        
        <!-- 底部按钮 -->
        <view class="drawer-footer">
          <button 
            class="confirm-btn primary-btn"
            @tap="applyFilter"
          >确定</button>
        </view>
      </view>
    </uni-drawer>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 搜索关键词
const keyword = ref('')

// 当前分类
const currentCategory = ref(0)

// 分类列表
const categories = ref([
  { id: 0, name: '全部' },
  { id: 1, name: '中医特色' },
  { id: 2, name: '跨境医疗' },
  { id: 3, name: '专家门诊' },
  { id: 4, name: '特色科室' }
])

// 特色医疗列表
const featuredList = ref([
  {
    id: 1,
    name: '中医特色诊疗',
    desc: '传承千年中医精华，守护您的健康',
    image: '/static/featured/tcm.jpg',
    tags: ['针灸推拿', '中药调理', '艾灸养生'],
    doctors: 20,
    cases: 1000,
    rating: 4.9
  },
  {
    id: 2,
    name: '跨境医疗服务',
    desc: '连接全球优质医疗资源',
    image: '/static/featured/cross-border.jpg',
    tags: ['专家会诊', '转诊服务', '康复护理'],
    doctors: 30,
    cases: 500,
    rating: 4.8
  },
  {
    id: 3,
    name: '专家门诊',
    desc: '汇聚顶尖医疗专家',
    image: '/static/featured/expert.jpg',
    tags: ['名医问诊', '远程会诊', '特需门诊'],
    doctors: 50,
    cases: 2000,
    rating: 4.9
  }
])

// 筛选条件
const filter = ref({
  hospital: '',
  priceRange: '',
  sort: 'default'
})

// 医院选项
const hospitals = [
  { value: 'jh', label: '镜湖医院' },
  { value: 'kd', label: '科大医院' }
]

// 价格区间
const priceRanges = [
  { value: '0-500', label: '500以下' },
  { value: '500-1000', label: '500-1000' },
  { value: '1000-2000', label: '1000-2000' },
  { value: '2000+', label: '2000以上' }
]

// 排序选项
const sortOptions = [
  { value: 'default', label: '综合排序' },
  { value: 'rating', label: '评分最高' },
  { value: 'cases', label: '案例最多' }
]

// 加载状态
const refreshing = ref(false)
const loadMoreStatus = ref('more')

// 搜索
const onSearch = (e) => {
  const value = e.detail.value.trim()
  // 这里处理搜索逻辑
}

// 选择分类
const selectCategory = (category) => {
  currentCategory.value = category.id
  // 这里加载对应分类的列表
}

// 查看详情
const viewDetail = (item) => {
  const routes = {
    1: '/pages/featured/tcm',
    2: '/pages/featured/cross-border',
    3: '/pages/featured/expert'
  }
  
  uni.navigateTo({
    url: routes[item.id] || '/pages/featured/project'
  })
}

// 显示筛选抽屉
const filterDrawer = ref(null)
const showFilter = () => {
  filterDrawer.value.open()
}

// 重置筛选
const resetFilter = () => {
  filter.value = {
    hospital: '',
    priceRange: '',
    sort: 'default'
  }
}

// 选择医院
const selectHospital = (value) => {
  filter.value.hospital = value
}

// 选择价格区间
const selectPriceRange = (value) => {
  filter.value.priceRange = value
}

// 选择排序方式
const selectSort = (value) => {
  filter.value.sort = value
}

// 应用筛选
const applyFilter = () => {
  filterDrawer.value.close()
  // 这里处理筛选逻辑
}

// 下拉刷新
const onRefresh = () => {
  // 这里处理刷新逻辑
  setTimeout(() => {
    refreshing.value = false
  }, 1000)
}

// 加载更多
const loadMore = () => {
  if (loadMoreStatus.value !== 'more') return
  loadMoreStatus.value = 'loading'
  
  // 这里处理加载更多逻辑
  setTimeout(() => {
    loadMoreStatus.value = 'noMore'
  }, 1000)
}
</script>

<style lang="scss">
.featured-all {
  min-height: 100vh;
  background: $bg-color;
  
  .search-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: #fff;
    
    .search-box {
      flex: 1;
      height: 72rpx;
      background: $bg-color;
      border-radius: $radius-xl;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      margin-right: 20rpx;
      
      .iconfont {
        font-size: 32rpx;
        color: $text-secondary;
        margin-right: 12rpx;
      }
      
      input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
      }
    }
    
    .filter-btn {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: $text-regular;
      
      .iconfont {
        font-size: 32rpx;
        margin-right: 4rpx;
      }
    }
  }
  
  .category-bar {
    background: #fff;
    white-space: nowrap;
    padding: 20rpx;
    
    .category-item {
      display: inline-block;
      padding: 12rpx 30rpx;
      margin-right: 20rpx;
      font-size: 28rpx;
      color: $text-regular;
      background: $bg-color;
      border-radius: $radius-lg;
      
      &.active {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
  
  .featured-list {
    height: calc(100vh - 184rpx);
    padding: 20rpx;
    
    .featured-item {
      background: #fff;
      border-radius: $radius-lg;
      margin-bottom: 20rpx;
      overflow: hidden;
      
      .cover-image {
        width: 100%;
        height: 300rpx;
      }
      
      .content {
        padding: 20rpx;
        
        .info {
          margin-bottom: 20rpx;
          
          .name {
            font-size: 32rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .desc {
            font-size: 26rpx;
            color: $text-regular;
            margin-bottom: 16rpx;
            display: block;
          }
          
          .tags {
            text {
              display: inline-block;
              font-size: 24rpx;
              color: $primary-color;
              background: $primary-light;
              padding: 4rpx 16rpx;
              border-radius: $radius-sm;
              margin-right: 12rpx;
            }
          }
        }
        
        .stats {
          display: flex;
          border-top: 1rpx solid $border-color;
          padding-top: 20rpx;
          
          .stat-item {
            flex: 1;
            text-align: center;
            
            .value {
              font-size: 32rpx;
              color: $primary-color;
              font-weight: bold;
              margin-bottom: 4rpx;
              display: block;
            }
            
            .label {
              font-size: 24rpx;
              color: $text-secondary;
            }
          }
        }
      }
      
      &:active {
        transform: scale(0.99);
      }
    }
  }
  
  .filter-drawer {
    height: 100%;
    background: #fff;
    padding: 30rpx;
    
    .drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
      
      .reset {
        font-size: 28rpx;
        color: $text-secondary;
      }
    }
    
    .filter-section {
      margin-bottom: 30rpx;
      
      .section-title {
        font-size: 30rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      
      .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
        
        text {
          font-size: 26rpx;
          color: $text-regular;
          background: $bg-color;
          padding: 12rpx 30rpx;
          border-radius: $radius-lg;
          
          &.active {
            color: #fff;
            background: $primary-gradient;
          }
        }
      }
      
      .sort-list {
        .sort-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 88rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          color: $text-regular;
          
          .iconfont {
            font-size: 32rpx;
            color: $primary-color;
            opacity: 0;
          }
          
          &.active {
            color: $primary-color;
            
            .iconfont {
              opacity: 1;
            }
          }
        }
      }
    }
    
    .drawer-footer {
      position: absolute;
      left: 30rpx;
      right: 30rpx;
      bottom: 30rpx;
      
      .confirm-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 30rpx;
        color: #fff;
        background: $primary-gradient;
        border-radius: $radius-xl;
        
        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}
</style> 